<template>
    <div>
        <h3>优惠券添加</h3>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td align="right">优惠券类型</td>
                    <td>
                        <select v-model="queryInfo.DiscountT">
                            <option value="">请选择</option>
                            <option :value="1">代金券</option>
                            <option :value="2">折扣券</option>
                            <option :value="3">兑换券</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td align="right">优惠券标题</td>
                    <td>
                        <input type="text" v-model="queryInfo.Title"/>
                    </td>
                </tr>
                <tr>
                    <td align="right">优惠券副标题</td>
                    <td>
                        <input type="text" v-model="queryInfo.FTitle"/>
                    </td>
                </tr>
                <tr>
                    <td align="right">优惠券图片</td>
                    <td>
                        <input type="file" @change="Img"/>
                        <img v-if="queryInfo.Photo!=''" :src="queryInfo.Photo" width="100" height="100"/>
                    </td>
                </tr>
                <tr>
                    <td align="right">优惠券库存</td>
                    <td>
                        <input type="text" v-model="queryInfo.Count"/>
                    </td>
                </tr>
                <tr>
                    <td align="right">每人限领</td>
                    <td>
                        <input type="text" disabled v-model="queryInfo.PersonCount"/>
                    </td>
                </tr>
                <tr>
                    <td align="right">使用条件</td>
                    <td>
                        <input type="text" v-model="queryInfo.Money"/>
                    </td>
                </tr>
                <!--是代金券的时候才会显示-->
                <tr v-if="queryInfo.DiscountT=='1'">
                    <td align="right">减免金额</td>
                    <td>
                        <input type="text" v-model="queryInfo.ReleaseMoney"/>
                    </td>
                </tr>
                <!--是折扣券的时候才会显示-->
                <tr v-if="queryInfo.DiscountT=='2'">
                    <td align="right">折扣价</td>
                    <td>
                        <input type="text" v-model="queryInfo.ZheKou"/>
                    </td>
                </tr>
                <tr>
                    <td align="right">有效期</td>
                    <td>
                        <input type="date" v-model="queryInfo.BeginTime"/>-<input type="date" v-model="queryInfo.EndTime"/>
                    </td>
                </tr>
                <tr>
                    <td align="right">使用业务</td>
                    <td>
                        <input type="checkbox" name="yewu" value="订房" v-model="queryInfo.Range"/>订房
                        <input type="checkbox" name="yewu" value="商城" v-model="queryInfo.Range"/>商城
                        <input type="checkbox" name="yewu" value="堂食" v-model="queryInfo.Range"/>堂食
                        <input type="checkbox" name="yewu" value="收款码" v-model="queryInfo.Range"/>收款码
                    </td>
                </tr>
                <tr>
                    <td align="right">使用须知</td>
                    <td>
                        <textarea cols="50" rows="5" v-model="queryInfo.Desc"></textarea>
                    </td>
                </tr>
                <tr>
                    <td align="right">适用门店</td>
                    <td>
                        <select v-model="queryInfo.ShopId">
                            <option :value="0">全部</option>
                            <option :value="item.Id" v-for="item in data.list" :key="item.Id">{{ item.ShopName }}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td align="right">服务电话</td>
                    <td>
                        <input type="text" v-model="queryInfo.Phone"/>
                    </td>
                </tr>
                <tr>
                    <td align="right">状态</td>
                    <td>
                        <input type="radio" name="state" :value="1" v-model="queryInfo.State"/>是
                        <input type="radio" name="state" :value="0" v-model="queryInfo.State"/>否
                    </td>
                </tr>
                <tr>
                    <td align="right">优惠券颜色</td>
                    <td>
                        <input type="color" v-model="queryInfo.Color"/>
                    </td>
                </tr>
                <tr>
                    <td align="right"></td>
                    <td>
                        <input type="button" value="添加" class="btn btn-success" @click="ok"/>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import axios from 'axios';
import { useRouter,useRoute } from 'vue-router';
const router=useRouter();
const route=useRoute();

onMounted(()=>{
    getShopList();
})

let data:any=reactive({
    list:[],
})

let queryInfo:any=reactive({
  "DiscountT": "",
  "Title": "",
  "FTitle": "",
  "Photo": "",
  "Count": "",
  "PersonCount": 1,
  "Money": "",
  "ReleaseMoney": 0,
  "ZheKou": 10,
  "BeginTime": "",
  "EndTime": "",
  "Range": [],
  "Desc": "",
  "ShopId": 0,
  "Phone": "",
  "State": 1,
  "Color": "#ff0000"
});

const ok=()=>{
    if(queryInfo.DiscountT==""){
        alert('类型必选');
        return;
    }
    if(queryInfo.Title==""){
        alert('标题不能为空');
        return;
    }
    if(queryInfo.FTitle==""){
        alert('副标题不能为空');
        return;
    }
    if(queryInfo.Photo==""){
        alert('图片不能为空');
        return;
    }
    if(queryInfo.Count==""){
        alert('库存不能为空');
        return;
    }
    if(isNaN(Number(queryInfo.Count))==true){
        alert('库存只能是数值类型');
        return;
    }
    if(queryInfo.Money==""){
        alert('使用条件不能为空');
        return;
    }
    if(isNaN(Number(queryInfo.Money))==true){
        alert('使用条件只能是数值类型');
        return;
    }
    if(queryInfo.DiscountT=='1'&&(queryInfo.ReleaseMoney < 0||isNaN(Number(queryInfo.ReleaseMoney))==true)){
        alert('减免金额不能为空，只能是大于0的数字');
        return;
    }
    if(queryInfo.DiscountT=='2'&& (queryInfo.ZheKou <1 || queryInfo.ZheKou>9.9)){
        alert('折扣价不能为空，只能是大于1小于9.9的数字');
        return;
    }
    if(queryInfo.BeginTime==""){
        alert('开始时间不能为空');
        return;
    }
    if(queryInfo.EndTime==""){
        alert('结束时间不能为空');
        return;
    }
    if(queryInfo.Range.length==0){
        alert('使用业务必选一项');
        return;
    }
    if(queryInfo.Desc.length>20){
        alert('20个字以内');
        return;
    }
    if(queryInfo.Desc==""){
        alert('使用须知不能为空');
        return;
    }
    if(queryInfo.Phone==""){
        alert('服务电话不能为空');
        return;
    }
    let reg=/^1[3-9]\d{9}$/;
    if(reg.test(queryInfo.Phone)==false){
        alert('手机号格式不正确');
        return;
    }
    queryInfo.Range=queryInfo.Range.toString();
    axios({
        url:'/api/Discount/AddDiscount',
        method:'post',
        data:queryInfo
    })
    .then((res)=>{
        console.log(res);
        if(res.data>0){
            alert('添加成功');
            router.push('/discount');
        }
        else if(res.data==-1){
            alert('相同的类型重复');
            return;
        }
        else{
            alert('添加失败');
            return;
        }
    })
    .catch((err)=>{
        console.log(err);
        
    })
}

//图片上传
const Img=(e:any)=>{
    let obj=e.target.files[0];
    let f=new FormData;
    f.append('file',obj);
    axios({
        url:'/api/Imgs/Img',
        method:'post',
        data:f
    })
    .then((res)=>{
        console.log(res);
        if(res.data=="不是图片"){
            alert('上传的不是图片');
            return;
        }
        if(res.data=="大于2M"){
            alert('图片大于2兆');
            return;
        }
        queryInfo.Photo=res.data;
    })
    .catch((err)=>{
        console.log(err);
    })
}

//获取门店列表
const getShopList=()=>{
    axios({
        url:'/api/Shop/GetShopList',
        method:'get',
        params:{
            pageSize:1000
        }
    })
    .then((res)=>{
        console.log(res);
        data.list=res.data.list;
    })
    .catch((err)=>{
        console.log(err);
    })
}

</script>

<style scoped>

</style>